<template>
    <mt-tabbar fixed v-model="selected">
        <mt-tab-item :id="item.id" v-for="(item) in classic" :key="item.id">
            <div>
               <div class="iconfont icon" v-html="item.icon"></div>
                {{ item.text}} 
            </div>
        </mt-tab-item>
    </mt-tabbar>   
</template>

<script>
export default {
    data(){
        return{
            selected:'home',
            classic:[
                {
                    "id":"home",
                    "text":"首页",
                    "icon":"&#xe60a;"
                },
                {
                    "id":"classic",
                    "text":"分类",
                    "icon":"&#xe609;"
                },
                {
                    "id":"brand",
                    "text":"品牌",
                    "icon":"&#xe675;"
                },
                {
                    "id":"groupbuying",
                    "text":"团购",
                    "icon":"&#xe669;"
                },
                {
                    "id":"mine",
                    "text":"我的",
                    "icon":"&#xe6af;"
                }    
            ]
        }
    },
    watch:{
        selected(){
            this.$router.push(this.selected)
        }
    }
}
</script>

<style scoped>
.mint-tabbar.is-fixed {
    background:  #591514;
    color: black;
}

.mint-tabbar > .mint-tab-item.is-selected {
    background-color: #591514;
    color: rgb(173, 11, 62);
}
.icon{
    font-size: 1.5rem;
}
</style>


